<template>
	<view class="points-center">
		<!-- 背景图片 -->
		<view class="background-image"></view>
		
		<!-- 顶部用户信息 -->
		<view class="user-info">
			<view class="avatar-container">
				<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="points-info">
				<text class="points-label">我的可用积分</text>
				<text class="points-number">{{points}}</text>
			</view>
			<view class="details-btn" @click="goToPointsDetails">
				<u-icon name="list" size="20" color="#333"></u-icon>
				<text class="details-text">明细</text>
			</view>
		</view>

		<!-- 签到卡片 -->
		<view class="sign-card">
			<view class="card-header">
				<text class="sign-title">签到领积分</text>
				<text class="continuous-reward">连续签到7天领取优惠券</text>
			</view>
			
			<!-- 签到进度条 -->
			<view class="sign-progress">
				<view class="progress-line"></view>
				<view class="progress-dots">
					<view 
						class="dot" 
						:class="{'completed': index < currentDay || (index === currentDay - 1 && isSignedToday)}"
						v-for="(item, index) in signDays" 
						:key="index"
						@click="handleDayClick(index)"
					>
						<text class="dot-text" :class="{'completed-text': index < currentDay}">{{item.reward}}</text>
					</view>
				</view>
			</view>
			
			<!-- 签到按钮 -->
			<view class="sign-btn-container">
				<button 
					class="sign-btn" 
					:class="{'signed': isSignedToday}"
					@click="handleSignIn"
					:disabled="isSignedToday"
				>
					{{isSignedToday ? '已签到' : '签到'}}
				</button>
			</view>
		</view>

		<!-- 兑换商品 -->
		<view class="exchange-section">
			<view class="section-title">
				<text>兑换商品</text>
			</view>
			<view class="products-grid">
				<view 
					class="product-item" 
					v-for="(product, index) in products" 
					:key="index"
					@click="handleProductClick(product)"
				>
					<view class="product-image">
						<image :src="product.image" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<text class="product-title">{{product.title}}</text>
						<text class="product-price">¥{{product.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				points: 955,
				currentDay: 2, // 当前签到天数（0-6）
				isSignedToday: false,
				transactions: [], // 交易记录数组
				signDays: [
					{ day: 1, reward: '+5' },
					{ day: 2, reward: '+5' },
					{ day: 3, reward: '+6' },
					{ day: 4, reward: '+6' },
					{ day: 5, reward: '+7' },
					{ day: 6, reward: '+7' },
					{ day: 7, reward: '¥' }
				],
				products: [
					{
						id: 1,
						title: '甜美V领荷叶袖T恤',
						price: 62,
						image: '/static/c1.png'
					},
					{
						id: 2,
						title: '时尚甜美蕾丝短袖衬衣',
						price: 269,
						image: '/static/c2.png'
					},
					{
						id: 3,
						title: '甜美可爱舒适宽松T恤',
						price: 449,
						image: '/static/c3.png'
					},
					{
						id: 4,
						title: '基础款短袖T恤',
						price: 286,
						image: '/static/c4.png'
					}
				]
			}
		},
		onLoad() {
			// 检查今日是否已签到
			this.checkSignInStatus();
			// 启动日期检查定时器
			this.startDateCheckTimer();
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.dateCheckTimer) {
				clearInterval(this.dateCheckTimer);
			}
		},
		methods: {
			// 检查签到状态
			checkSignInStatus() {
				// 纯静态页面，使用内存变量
				this.isSignedToday = false; // 默认未签到
			},
			// 启动日期检查定时器
			startDateCheckTimer() {
				// 纯静态页面，暂时不需要定时器
			},
			// 检查日期变化
			checkDateChange() {
				// 纯静态页面，暂时不需要日期检查
			},
			// 处理签到
			handleSignIn() {
				if (this.isSignedToday) {
					uni.showToast({
						title: '今日已签到',
						icon: 'none'
					});
					return;
				}
				
				// 执行签到
				this.performSignIn();
			},
			// 执行签到
			performSignIn() {
				uni.showLoading({
					title: '签到中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					// 更新积分和签到天数
					const reward = this.getTodayReward();
					this.points += reward;
					// 记录签到交易
					this.addTransaction('签到', reward);
					this.currentDay += 1;
					this.isSignedToday = true;
					
					// 显示签到成功
					uni.showToast({
						title: `签到成功！+${reward}积分`,
						icon: 'success',
						duration: 2000
					});
					
					// 检查是否连续签到7天
					if (this.currentDay >= 7) {
						this.showCouponReward();
					}
				}, 1000);
			},
			// 获取今日奖励积分
			getTodayReward() {
				if (this.currentDay < 2) return 5;
				if (this.currentDay < 4) return 6;
				if (this.currentDay < 6) return 7;
				return 10; // 第7天奖励优惠券
			},
			// 显示优惠券奖励
			showCouponReward() {
				setTimeout(() => {
					uni.showModal({
						title: '恭喜获得优惠券',
						content: '连续签到7天，获得10元优惠券一张！',
						showCancel: false,
						confirmText: '确定'
					});
				}, 500);
			},
			// 点击天数
			handleDayClick(index) {
				if (index <= this.currentDay) {
					uni.showToast({
						title: `第${index + 1}天已签到`,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: `第${index + 1}天还未到`,
						icon: 'none'
					});
				}
			},
			// 处理商品点击
			handleProductClick(product) {
				uni.showModal({
					title: '兑换确认',
					content: `确定使用${product.price}积分兑换"${product.title}"吗？`,
					success: (res) => {
						if (res.confirm) {
							if (this.points >= product.price) {
								this.points -= product.price;
								// 记录兑换交易
								this.addTransaction(`兑换商品: ${product.title}`, -product.price);
								uni.showToast({
									title: '兑换成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '积分不足',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			// 添加交易记录
			addTransaction(description, points) {
				const now = new Date();
				const transaction = {
					description: description,
					date: now.toISOString().split('T')[0], // 格式：YYYY-MM-DD
					points: points
				};
				
				// 添加到内存中的交易记录数组
				this.transactions.unshift(transaction);
				
				// 调试信息
				console.log('添加交易记录:', transaction);
				console.log('当前交易记录总数:', this.transactions.length);
			},
			// 跳转到积分明细
			goToPointsDetails() {
				// 将交易记录传递给积分明细页面
				uni.navigateTo({
					url: `/pages/kzPointsCenter/kzPointsDetails?transactions=${encodeURIComponent(JSON.stringify(this.transactions))}&points=${this.points}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.points-center {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}

	// 背景图片 - 简化为色块
	.background-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 50%, #d8d8d8 100%);
		z-index: -1;
	}

	// 顶部用户信息
	.user-info {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		position: relative;
		z-index: 1;

		.avatar-container {
			margin-right: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 4rpx solid #ffffff;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			}
		}

		.points-info {
			flex: 1;

			.points-label {
				display: block;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.points-number {
				font-size: 48rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.details-btn {
			display: flex;
			align-items: center;
			padding: 16rpx 24rpx;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 30rpx;
			backdrop-filter: blur(10px);

			.details-text {
				font-size: 24rpx;
				color: #333333;
				margin-left: 8rpx;
			}
		}
	}

	// 签到卡片
	.sign-card {
		background-color: #f5f5dc;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 1;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.sign-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.continuous-reward {
				font-size: 24rpx;
				color: #666666;
			}
		}

		// 签到进度条
		.sign-progress {
			position: relative;
			margin-bottom: 50rpx;

			.progress-line {
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				height: 2rpx;
				background-color: #e0e0e0;
				transform: translateY(-50%);
				z-index: 1;
			}

			.progress-dots {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				z-index: 2;

				.dot {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #f5f5dc;
					border: 3rpx solid #d4c4a8;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					&.completed {
						background-color: #ffffff;
						border-color: #d4c4a8;
					}

					.dot-text {
						font-size: 20rpx;
						color: #333333;
						font-weight: bold;

						&.completed-text {
							color: #333333;
						}
					}
				}
			}
		}

		// 签到按钮
		.sign-btn-container {
			text-align: center;

			.sign-btn {
				background-color: #ffffff;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				padding: 24rpx 80rpx;
				border-radius: 40rpx;
				border: none;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
				}

				&.signed {
					background-color: #e0e0e0;
					color: #999999;
				}

				&:disabled {
					opacity: 0.6;
				}
			}
		}
	}

	// 兑换商品
	.exchange-section {
		background-color: #ffffff;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 1;

		.section-title {
			margin-bottom: 30rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.products-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20rpx;

			.product-item {
				background-color: #ffffff;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
				}

				.product-image {
					width: 100%;
					height: 200rpx;
					background-color: #f5f5f5;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.product-info {
					padding: 20rpx;

					.product-title {
						display: block;
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 8rpx;
						line-height: 1.4;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.product-price {
						font-size: 28rpx;
						color: #ff6b35;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
